<template>
  <div class="page-container flex-column-center">

    <div class="page-info-title">
      <p class="o7">我的文献阅读量打败了全馆{{ defeatNum }}位读者</p>
      <p class="big">我的阅读排名第{{ rank }}位</p>
      <p v-if="rank != 1" class="o5">我与前一名的阅读差距还有{{ borrow }}册</p>
    </div>

    <div class="page-main-box"></div>

    <img class="page-bg-title" src="@/assets/images/t2.png" />

  </div>
</template>
<script>

export default {
  name: 'pageReadRank',
  props: ['reportData'],
  data () {
    return {
      defeatNum: 0,
      rank: 0,
      borrow: 0
    }
  },
  watch: {
    reportData: {
      immediate: true,
      handler (val) {
        if (val) {
          const d = JSON.parse(val.data9)
          this.defeatNum = d.defeatNum
          this.rank = d.myBorrowRank.rankNum
          this.borrow = d.myBorrowRank.diffNum
        }
      }
    }
  },
  mounted () {
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  position: relative;
  background: url('~@/assets/images/bg.png') no-repeat left top,
  linear-gradient(to top, #498f60 0%, #8fc9a3 50%, #8fc9a3 85%, #498f60 100%);
  background-size: 100%;
}
</style>
